<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>The source code</title>
  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  <style type="text/css">
    .highlight { display: block; background-color: #ddd; }
  </style>
  <script type="text/javascript">
    function highlight() {
      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
    }
  </script>
</head>
<body onload="prettyPrint(); highlight();">
  <pre class="prettyprint lang-js">
<span id='global-property-S-'>/**
</span> * @fileOverview 布局内部存在可折叠的项
 * @ignore
 */


var $ = require(&#39;jquery&#39;),
	BUI = require(&#39;bui-common&#39;);

<span id='BUI-Layout-Collapsable'>/**
</span> * @class BUI.Layout.Collapsable
 * 可以展开、折叠的布局的扩展类
 */
var Collapsable = function(){

};

Collapsable.ATTRS = {

<span id='BUI-Layout-Collapsable-cfg-triggerCls'>	/**
</span>	 * 触发展开折叠的样式
	 * @cfg {String} triggerCls
	 */
	triggerCls : {
		
	},
<span id='BUI-Layout-Collapsable-cfg-duration'>	/**
</span>	 * 动画的持续时间
	 * @cfg {Number} duration
	 */
	duration : {
		value : 400
	},
<span id='BUI-Layout-Collapsable-cfg-accordion'>	/**
</span>	 * 是否只能展开一个
	 * @cfg {Boolean} accordion
	 */
	accordion : {
		value : false
	}

};

BUI.augment(Collapsable,{
	//绑定展开折叠事件
	bindCollapseEvent : function(){
		var _self = this,
			triggerCls = _self.get(&#39;triggerCls&#39;),
			el = _self.get(&#39;container&#39;);
		el.delegate(&#39;.&#39; + triggerCls,&#39;click&#39;,function(ev){
			var sender = $(ev.currentTarget),
				item = _self.getItemByElement(sender);
			_self.toggleCollapse(item);
		});
	},
<span id='BUI-Layout-Collapsable-method-getExpandedItem'>	/**
</span>	 * 获取展开的选项
	 * &lt;pre&gt;
	 * &lt;code&gt;
	 * var item = layout.getExpandedItem();
	 * item &amp;&amp; layout.collapseItem(item);
	 * &lt;/code&gt;&lt;/pre&gt;
	 * @return {BUI.Layout.Item} 选项
	 */
	getExpandedItem : function(){
		return this.getItemBy(function(item){
			return !item.get(&#39;collapsed&#39;)
		});
	},
<span id='BUI-Layout-Collapsable-method-expandItem'>	/**
</span>	 * 展开
	 * &lt;pre&gt;
	 * &lt;code&gt;
	 * var item = layout.getItemsByRegion(&#39;west&#39;)[0];
	 * item &amp;&amp; layout.collapseItem(item);
	 * &lt;/code&gt;&lt;/pre&gt;
	 * @param  {BUI.Layout.Item} item 选项
	 */
	expandItem : function(item){
		var _self = this,
			duration = _self.get(&#39;duration&#39;),
			range = _self.getCollapsedRange(item),
			activeItem;
		if(item.get(&#39;collapsed&#39;)){
			if(_self.get(&#39;accordion&#39;)){ //如果是互斥的收缩，将展开的收缩掉
				activeItem = _self.getExpandedItem();
				if(activeItem){
					_self.beforeCollapsed(activeItem,range);
					activeItem.collapse(duration,function(){
						_self.afterCollapsed(activeItem);
					});
				}
			}
			_self.beforeExpanded(item,range);
			item.expand(range,duration,function(){
				_self.afterExpanded(item);
			});
		}
	},
<span id='BUI-Layout-Collapsable-method-afterExpanded'>	/**
</span>	 * 展开选项后
	 * @protected
	 */
	afterExpanded : function(item){

	},
<span id='BUI-Layout-Collapsable-method-beforeExpanded'>	/**
</span>	 * 展开选项前
	 * @protected
	 */
	beforeExpanded : function(item,range){

	},
<span id='BUI-Layout-Collapsable-method-collapseItem'>	/**
</span>	 * 收缩
	 * &lt;pre&gt;
	 * &lt;code&gt;
	 * var item = layout.getExpandedItem();
	 * item &amp;&amp; layout.collapseItem(item);
	 * &lt;/code&gt;&lt;/pre&gt;
	 * @param  {BUI.Layout.Item} item 选项
	 */
	collapseItem : function(item){
		var _self = this,
			duration = _self.get(&#39;duration&#39;),
			range = _self.getCollapsedRange(item),
			nextItem;
		if(!item.get(&#39;collapsed&#39;)){
			if(_self.get(&#39;accordion&#39;)){ //如果是互斥的收缩，展开下一项
				nextItem = _self.getNextItem(item);
				_self.beforeExpanded(nextItem,range);
				nextItem.expand(range,duration,function(){
					_self.afterExpanded(nextItem);
				});
			}
			_self.beforeCollapsed(item,range);
			item.collapse(duration,function(){
				_self.afterCollapsed(item);
			});
		}
	},
<span id='BUI-Layout-Collapsable-method-beforeCollapsed'>	/**
</span>	 * 折叠选项前
	 * @protected
	 */
	beforeCollapsed : function(item,range){

	},
<span id='BUI-Layout-Collapsable-method-afterCollapsed'>	/**
</span>	 * 折叠选项后
	 * @protected
	 */
	afterCollapsed : function(item){

	},
<span id='BUI-Layout-Collapsable-method-getCollapsedRange'>	/**
</span>	 * @protected
	 * 获取折叠的数值范围
	 * @return {Number} 获取折叠的数值范围
	 */
	getCollapsedRange : function(item){

	},
<span id='BUI-Layout-Collapsable-method-toggleCollapse'>	/**
</span>	 * 展开折叠选项
	 * @param  {BUI.Layout.Item} item 选项
	 */
	toggleCollapse : function(item){
		var _self = this;
		if(item.get(&#39;collapsed&#39;)){
			_self.expandItem(item);
		}else{
			_self.collapseItem(item);
		}
	}
});

module.exports = Collapsable;
</pre>
</body>
</html>
